<template>
  <div class="subject">
    <span>{{ num1 }}</span>
    <span>+</span>
    <span>{{ num2 }}</span>
    <span>=</span>
    <input type="number" v-model.trim.number="result" />
    <button @click="submit">提交</button>
  </div>
</template>

<script>
// 1. 生成两个随机数
// 2. 提供结果输入框
// 3. 监听提交按钮的点击事件，计算结果正确与否，得到一个结果文案
// 4. 将结果文案传递出去，供外界使用
export default {
  name: 'SubjectItem',
  data() {

    const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)

    return {
      num1: randomInt(0, 20),
      num2: randomInt(0, 20),
      result: ''
    }
  },
  methods: {
    submit() {
      if (!this.result) {
        return alert('请输入结果')
      }

      const resultText = this.num1 + this.num2 === this.result ? '回答正确' : '回答错误'

      this.$emit('submit', resultText)

    }
  }
};
</script>

<style scoped>
.subject {
  margin: 5px;
  padding: 5px;
  font-size: 20px;
}
.subject span {
  display: inline-block;
  text-align: center;
  width: 20px;
}
.subject input {
  width: 50px;
  height: 20px;
}
</style>